<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>节点管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="__LAY__/css/layui.css" media="all" />
    <link rel="stylesheet" href="__CSS__/font_eolqem241z66flxr.css" media="all" />
    <link rel="stylesheet" href="__FONT__/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/main.css" media="all" />
    <style>
        .layui-field-title {
            margin: 10px 10px;
        }
    </style>
</head>
<body>
<div class="layui-anim layui-anim-upbit right_body">

    <div class="right_content_top">
        <blockquote class="layui-elem-quote">
            <a href="/admin/node/index.html"  class="layui-btn layui-btn-normal" >
                目录形式展示
            </a>
            <a href="/admin/node/nodelist.html"  class="layui-btn layui-btn-normal" style="background-color: #787f84">
                列表形式展示
            </a>
        </blockquote>
    </div>

    <fieldset class="layui-elem-field layui-field-title" >
        <legend style="font-size: 14px;">菜单列表<i class="layui-icon"  id="add_rule">&#xe654;</i> </legend>
    </fieldset>

    <div class="layui-container" style=" width: 100%; height: 660px;">

        <div class="layui-row">
            <div class="layui-col-md2" style="height: 660px; border-right: 2px solid #eee; margin: 5px 0">
                <ul id="demo" style="padding: 5px 10px;"></ul>
            </div>
            <div class="layui-col-md10" style="padding: 0 10px;">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>菜单名称</th>
                        <th>菜单权限</th>
                        <th>排序</th>
                        <th>图标</th>
                        <th>是否菜单</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="select_rule">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="__JS__/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="__LAY__/layui.js"></script>
<script type="text/javascript" src="__JS__/index.js"></script>
<script src="https://cdn.bootcss.com/limonte-sweetalert2/7.21.1/sweetalert2.all.js"></script>
<script>
    function initTable()
    {
        layui.use(['tree','form','layer'], function() {
            var $ = layui.jquery,
                layer = layui.layer,
                form = layui.form;
            var html = "";
            layui.tree({
                elem: '#demo' //指定元素
                ,skin: 'yellow'
                ,target: '_self' //是否新选项卡打开（比如节点返回href才有效）
                ,click: function(item){
                    $('.select_rule').html('');
                    html= '<tr><td>'+item.name+'</td> ' +
                        '<td>'+item.href_name+'</td> '+
                        '<td>'+item.sort+'</td>' +
                        '<td>'+item.style+'</td> ' +
                        '<td>'+item.is_menu+'</td> ' +
                        '<td> <a class="layui-btn layui-btn-sm layui-btn-radius add_child_rule"  data-id="'+item.id+'"><i class="layui-icon">&#xe654;</i>  添加子菜单</a> ' +
                        '<a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-mini edit_rule" data-id="'+item.id+'"><i class="layui-icon">&#xe642;</i> 修改</a> ' +
                        '<a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-mini del_rule" data-id="'+item.id+'"><i class="layui-icon">&#xe640;</i> 删除</a> ' +
                        '</td> ' +
                        '</tr>';
                    $('.select_rule').html(html);
                    //点击节点回调
                    // layer.alert('当前节名称：'+ item.name + '<br>全部参数：'+ JSON.stringify(item));
//                console.log(item);
                },
                nodes:{$json_tree}

            });
        });
    }
    $(document).ready(function () {
        //调用函数，初始化表格
        initTable();
    });


    //添加父菜单
    $('#add_rule').on('click',function () {
        layer.open({
            type: 2,
            content: ["{:url('node/addnode',['pid'=>'0'])}"],
            area: ['50%', '80%']
        });
    });

    //添加子菜单
    $("body").on("click",".add_child_rule",function(){
        var url =   window.location.pathname;
        tmpHPage = url.split( "/" );
        tmpHPage.pop();
        url =  tmpHPage.join("/");
        var _this = $(this);
        var id =  _this.attr("data-id");
        layer.open({
            type: 2,
            content:  url+"/addnode?pid="+id,
            area: ['50%', '80%']
        });
    });

    //修改菜单
    $("body").on("click",".edit_rule",function(){
        var url =   window.location.pathname;
        tmpHPage = url.split( "/" );
        tmpHPage.pop();
        url =  tmpHPage.join("/");
        var _this = $(this);
        var id =  _this.attr("data-id");
        layer.open({
            type: 2,
            content:  url+"/editnode?id="+id,
            area: ['50%', '80%']
        });
    });

    //删除菜单
    $("body").on("click",".del_rule",function(){
        var _this = $(this);
        var id =  _this.attr("data-id");
        swal({
            title: "确定删除吗？",
            text: "删除后将无法恢复",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确定删除！",
            cancelButtonText: "取消删除！",
            closeOnConfirm: false,
            closeOnCancel: false
        })
            .then(function(isConfirm){
                if(isConfirm.value) {
                    $.post("{:url('node/nodedel')}",{'id':id},function (res) {
                        if(1 == res.code){
                            swal({
                                text: "删除成功",
                                type: "success",
                                confirmButtonText: "确定删除！",
                                closeOnConfirm: false,
                                closeOnCancel: false,
                                showCancelButton:false,
                                showConfirmButton:true,
                            }).then(function(isConfirm){
                                window.location.reload();
                            })
                        }else if(111 == res.code){
                            window.location.reload();
                        }else{
                            swal("取消！", res.msg,
                                "error");
                        }
                    })
                } else {
                    swal("取消！", "感谢您没有把我删除奥",
                        "error");
                }
            });
    });
</script>
</html>